import React,{Component} from 'react';

class Input1 extends Component{
    handleInput(event){
        // console.log(value);
        this.setState({
           sum:event.target.value
        });
    }

    say(){
        console.log(this.state);
    }

    priceChange(event,index){
        console.log('aa');
        let newList = this.state.list.slice();

        newList[index].price = event.target.value;
        this.setState({
            list:newList
        });
    }

    constructor(state){
        super(state);
        this.state= {
            sum:'',
            list:[
                {name:'apple',price:4.5},
                {name:'orange',price:5},
                {name:'peal',price:4}
            ]
        }
        this.say = this.say.bind(this);
        this.handleInput = this.handleInput.bind(this);
        this.priceChange = this.priceChange.bind(this);
    }

    render(){
        return (
           <div className='input-con'>
               {this.props.children}
               <input type="text" onChange={ this.handleInput} value={this.state.sum}/>
               {this.props.unit}
               <div>
                   {this.state.sum}+M
               </div>
               <p>
                   <button onClick={this.say}>doSay</button>
               </p>
               <ul>
               {
                   this.state.list.map((item,index)=>{
                       return (<li key={item.name}>{item.name}
                        {/*<input type="text" value={item.price} onChange={(event)=> this.priceChange()}/>*/}
                           <input type="text" value={item.price} onChange={(event) => this.priceChange(event,index)}/>
                        </li>)
                   })
               }
               </ul>
               <div>
                   <span>
                       {
                           this.state.list.map((item)=>{
                               return <span key={item.name}>{item.price}</span>
                           })
                       }
                   </span>
               </div>
           </div>
        )
    }
}

export default Input1;